<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
  <style>
    label, input { /* display:block;  */}
    input.text { margin-bottom:12px; width:95%; padding: .4em; font-size: 62.5%;}
    fieldset { padding:0; border:0; margin-top:25px; font-size: 62.5%;}
    h1 { font-size: 1.2em; margin: .6em 0; font-size: 62.5%;}
    div#users-contain { width: 350px; margin: 20px 0; font-size: 62.5%;}
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; font-size: 62.5%;}
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; font-size: 62.5%;}
    .ui-dialog .ui-state-error { padding: .3em;}
    .validateTips { border: 1px solid transparent; padding: 0.3em; font-size: 62.5%;}
    .ui-button.ui-widget .ui-button-text{line-height:15px; font-size: 62.5%;}
    .ui-dialog .ui-dialog-titlebar-close span{background-image: url(${initParam.root}images/ui-icons_0073ea_256x240.png);}  
  </style>  
  <script>  
  $(function() {
    var dialog_login, dialog_register, loginForm, registerForm,
      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      name = $( "#name" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );
    
  	 $("#email_register").keyup(function(){		  
  		  $("#mailFlag").val(-1);
  	 });
  	 
  	 $("#emailCheck").click(function(){
  		 //alert($("#email").text());
  		 if($("#email_register").val()==""){
  			 alert("이메일을 입력해주세요!");
  			 return;
  		 }		 
  		 $.ajax({
  			type:"post",
  			url:"${initParam.root}member/checkEmail.do",
  			data:"email="+$("#email_register").val(),
  			dataType:"json",
  			success:function(data){  				
  				if(data==1){
  					alert("아이디가 중복됩니다!");
  					$("#mailFlag").val(data);
  					return;
  				}else{
  					alert("가입이 가능한 아이디입니다!");
  				}
  				$("#mailFlag").val(data);
  			}
  		 });
  	 });
  	 
  	 $("#retype_password").keyup(function(){
  		if($("#password_register").val()==$("#retype_password").val()){
  			$("#passCheck").html("비밀번호가 일치합니다!").css("background","skyblue");
  			$("#passFlag").val($("#retype_password").val());
  		}else{
  			$("#passCheck").html("비밀번호가 일치하지않습니다!").css("background","#ffd8d8");
  			$("#passFlag").val("");
  		}
  	 });
    
    /* function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    } */
 
    /* function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    } */
 
    /* function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    } */
 
    function addUser() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );
 
      valid = valid && checkLength( email, "email", 6, 80 );
      valid = valid && checkLength( password, "password", 5, 16 );
 
      valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
      valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
      valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
      if ( valid ) {
        $( "#users tbody" ).append( "<tr>" +
          "<td>" + name.val() + "</td>" +
          "<td>" + email.val() + "</td>" +
          "<td>" + password.val() + "</td>" +
        "</tr>" );
        dialog_login.dialog( "close" );
      }
      return valid;
    }
  
  	//dialog_login config
    dialog_login = $( "#dialog_login_form" ).dialog({
      autoOpen: false,
      resizable: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "로그인":function(){
        	loginForm[0].submit();
        }
      },
      close: function() {
    	loginForm[0].reset();
        allFields.removeClass( "ui-state-error" ); //새로 열 경우 적용된 error 관련 클래스 삭제
      }
    });
  	
  	//login button 클릭 시 이벤트 - dialog창 오픈
    $( "#login" ).button().on( "click", function() {
    	dialog_login.dialog( "open" );
    });
  	//logout button 클릭 시 이벤트
    $( "#logout" ).button().on( "click", function() {
    	location.href="${initParam.root}member/logout.do";
    });
    $( "#logout_admin" ).button().on( "click", function() {
    	location.href="${initParam.root}member/logout.do";
    });
  	//내 정보 button 클릭 시 이벤트 - dialog창 오픈
    $( "#mypage" ).button().on( "click", function() {
    	location.href="${initParam.root}member/mypage_view.do";
    });
  	
  	//dialog_register config
    dialog_register = $( "#dialog_register_form" ).dialog({
        autoOpen: false,
        resizable: false,
        height: 480,
        width: 340,
        modal: true,
        buttons: {
          "회원가입": function(){
			if($("#email_register").val()==""){
				alert("이메일을 입력해주세요!");
				return;
			}
			if($("#nick").val()==""){
				alert("닉네임을 입력해주세요!");
				return;
			}
			
        	if($("#mailFlag").val()==0&&($("#passFlag").val()==$("#retype_password").val())){
        		registerForm[0].submit();
        	}else if($("#mailFlag").val()==1){
        		alert("아이디가 중복됩니다!");
        		$("#mailFlag").val(-1);
        	}else{
        		alert("중복체크 및 비밀번호체크 부탁드려요!");
      			return;
        	}
        	
          }
        },
        close: function() {
          registerForm[0].reset();
          allFields.removeClass( "ui-state-error" ); //새로 열 경우 적용된 error 관련 클래스 삭제        
        }
      });
  	//register button 클릭 시 이벤트 - dialog창 오픈
    $("#register").button().on( "click", function() {
    	dialog_register.dialog( "open" );
    });
  	
  	//dialog form config
    loginForm = dialog_login.find("#loginForm").on("submit", function( event ) {
      event.preventDefault(); //submit을 하지 않게하는 메서드
      //addUser();
    });
  	
    registerForm = dialog_register.find("#registerForm").on("submit", function( event ) {
        event.preventDefault(); //submit을 하지 않게하는 메서드
        addUser();
    });
    
  });
</script>
<div id="dialog_login_form">
  <p class="validateTips">All form fields are required.</p> 
  <form method="post" id="loginForm" action="${initParam.root }member/login.do">
    <fieldset>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all">
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<div id="dialog_register_form">
  <!-- <p class="validateTips">회원가입</p>   -->
  <form id="registerForm" action="${initParam.root }member/register.do">
    <fieldset>
      <label for="email">Email</label>
      <input type="text" id="email_register" name="email_register" class="text ui-widget-content ui-corner-all">
      <input type="button" id="emailCheck" value="중복체크">
      <br><br>
      <label for="password">Password</label>
      <input type="password" name="password_register" id="password_register" class="text ui-widget-content ui-corner-all">
      
      <label for="retype_password">Retype Password</label>
      <input type="password" name="retype_password" id="retype_password" class="text ui-widget-content ui-corner-all"><br>
 	  <span id="passCheck"></span>
 	  <br>
 	  <br>
 	  <label for="nick">Nick</label>
      <input type="text" name="nick" id="nick" class="text ui-widget-content ui-corner-all">
      <span id="nickCheck"></span>
      <input type="hidden" id="mailFlag" value="-1">
      <input type="hidden" id="passFlag" value="">
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
<c:choose>
	<c:when test="${sessionScope.mvo==null&&sessionScope.avo==null}">
		<button id="login" class="login_button">로그인</button>
		<button id="register" class="register_button">회원가입</button>
	</c:when>
	<c:when test="${sessionScope.mvo!=null}">
		${sessionScope.mvo.nick}님을 환영합니다~!
		<button id="logout" class="logout_button">로그아웃</button>
		<button id="mypage" class="mypage_button">내 정보</button>
	</c:when>
	<c:otherwise>
		로그인상태(관리자)
		<button id="logout_admin" class="logout_button">로그아웃</button>
	</c:otherwise>
</c:choose> 
